<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css"
	href="css/jquery.datetimepicker.css">
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery.datetimepicker.js"></script>
<script type="text/javascript"
	src="http://webapi.amap.com/maps?v=1.3&key=eab5bf69b811c1191f09341ae6ee62e2"></script>

</head>

<body>
	<div class="map" id="container"></div>

	<div class="person_list">
		<div class="title">车辆示例平台<span class="ctrl pull-right glyphicon glyphicon-chevron-down"></span></div>
		<div class="tab_btn active" id="tabbtn1">实时监控</div>
		<div class="tab_btn" id="tabbtn2">历史轨迹</div>
		<div id="tab">
		<div class="tab-data" id="tab1">
			<div class="search">
				<input type="text" value="请输入关键字"><span class="search-i"><i
					class="glyphicon glyphicon-search"></i>
				</span> <a href="javascript:void(0)">已选</a> <a href="javascript:void(0)">清除已选</a>
			</div>
			<div class="list_menu">
				<ul>
					<li><input type="checkbox"> <label class="check-box"></label>
						<span class="state" title="离线"></span> <span class="pname">名称1</span></li>
					<li><input type="checkbox"> <label class="check-box"></label>
						<span class="state" title="离线"></span> <span class="pname">名称2</span></li>
					<li><input type="checkbox"> <label class="check-box"></label>
						<span class="state" title="离线"></span> <span class="pname">名称3</span></li>
					<li><input type="checkbox"> <label class="check-box"></label>
						<span class="state" title="离线"></span> <span class="pname">名称4</span></li>
				</ul>
			</div>
		</div>
		<div class="tab-data" id="tab2">
			<div class="date-panel">
				<span>查询日期 </span> <input type="text" class="date" id="div_date">
				<span class="caret"></span>

			</div>
			<div class="search">
				<input type="text" value="请输入关键字"><span class="search-i"><i
					class="glyphicon glyphicon-search"></i>
				</span> <a href="javascript:void(0)">已选</a> <a href="javascript:void(0)">清除已选</a>
			</div>
			<div class="list_menu">
				<ul>
					<li>
						<input type="checkbox"> 
						<label class="check-box"></label>
						<span class="sel-track-name">名称1</span> 
						<span class="pro-bar" style="width: 60px;">
						<span class="bar"></span>
						</span>
						<span class="process play"  title="回放轨迹">
						<span class="glyphicon glyphicon-play"></span>
						</span>
					</li>
					<li><input type="checkbox"> 
					<label class="check-box"></label>
					<span class="sel-track-name">名称2</span>
					<span class="pro-bar" style="width: 100px;">
						<span class="bar"></span>
						</span>
						<span class="process play"  title="回放轨迹">
						<span class="glyphicon glyphicon-play"></span>
						</span>
					</li>
					<li>
					<input type="checkbox">
					<label class="check-box"></label>
					<span class="sel-track-name">名称3</span>
					<span class="pro-bar" style="width: 80px;">
						<span class="bar"></span>
						</span>
						<span class="process play"  title="回放轨迹">
						<span class="glyphicon glyphicon-play"></span>
						</span>
					</li>
					<li>
					<input type="checkbox"> 
					<label class="check-box"></label>
					<span class="sel-track-name">名称4</span>
					<span class="pro-bar" style="width: 40px;">
						<span class="bar"></span>
						</span>
						<span class="process play"  title="回放轨迹">
						<span class="glyphicon glyphicon-play"></span>
						</span>
					</li>
				</ul>
			</div>
		</div>
		</div>
	</div>

	<script>
		var map = new AMap.Map('container');
		map.setZoom(10);
		map.setCenter([ 116.39, 39.9 ]);
	</script>
	<script>
		$("#tab").slideUp();
		$("#tab2").fadeOut();
		$(".ctrl").click(function(){
			if($(this).hasClass("glyphicon-chevron-down")){
				$("#tab").slideDown();
				$(this).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
			}
			else{
				$("#tab").slideUp();
				$(this).removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
			}
		});
		$("#tabbtn1").click(function(){
			$(".tab_btn").removeClass("active");
			$(this).addClass("active");
			$(".tab-data").css("display","none");
			$("#tab1").css("display","block");
			if($(".ctrl").hasClass("glyphicon-chevron-down")){
				$("#tab").slideDown();
				$(".ctrl").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
			}
		});
		$("#tabbtn2").click(function(){
			$(".tab_btn").removeClass("active");
			$(this).addClass("active");
			$(".tab-data").css("display","none");
			$("#tab2").css("display","block");
			if($(".ctrl").hasClass("glyphicon-chevron-down")){
				$("#tab").slideDown();
				$(".ctrl").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
			}
		});
		$(".list_menu li").click(function() {
			if (!($(this).find("input").prop("checked")))
				$(this).find("input").prop("checked", true);
			else
				$(this).find("input").prop("checked", false);
		});
		
		$("#div_date").datetimepicker({
			lang : "ch", //语言选择中文
			format : "Y-m-d", //格式化日期
			timepicker : false, //关闭时间选项
			yearStart : 2000, //设置最小年份
			yearEnd : 2050, //设置最大年份
			todayButton : false
		//关闭选择今天按钮
		});
	</script>
</body>
</html>
